<!-- 食谱详情 -->
<template>
	<view class="back">
		<scroll-view class="content" scroll-y>
			<!-- 顶部 -->
			<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
				<view>
					<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
						class="shrink-0 image_3"
						src="http://101.43.223.224:8765/image/getImageById?id=6756" />
				</view>
				<view class="div2">
					<view class="div2-2"
						style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
						>
						<view style="float: left;">
							<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../../static/哑铃.png" alt="">
							</image>
						</view>
						<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
							<text style="font-weight: bold;">追云健身俱乐部</text>
						</view>
					</view>
				</view>
			</view>
			<view style="margin:auto;height: 5%;width: 96%;padding-top: 10rpx;border-radius: 15px;">
				 <view @click="goBack()"><uni-icons type="arrow-left" size="30"></uni-icons></view>
			</view>
			<view v-for="(item, index) in itemone" :key="index" style="margin-bottom: 50rpx;">
				<!-- {{ item.recipeName }} -->
				<view style="margin:auto;height: 13%;width: 96%;padding-top: 10rpx;border-radius: 15px;text-align: center;">
					<view style="margin: auto;font-size: 36rpx;" v-if="item.footType == 0">素食饮食计划</view>
					<view style="margin: auto;font-size: 36rpx;" v-if="item.footType == 1">肉食饮食计划</view>
					<view style="margin: auto;font-size: 36rpx;" v-if="item.footType == 2">生酮健康饮食计划</view>
					<view style="margin: 20rpx auto;color: aqua;font-size: 32rpx;"><uni-icons type="fire" size="20" color="aqua"></uni-icons>总热量：{{ item.heat }}cal</view>
				</view>
				<view style="width: 80%; margin: auto; display: flex;">
				  <image :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.recipeFileId" mode="" style="width: 50%;" />
				  <view style="width: 50%;padding: 15rpx;">
					  <view style="font-size: 30rpx;">{{ item.recipeName }}</view>
					  <view style="color: aqua;"><uni-icons type="fire" size="20" color="aqua"></uni-icons>{{  item.heat }}kcal</view>
					  <view id="zheng">食材成分</view>
					  <view id="fu">{{ item.ingredients }}</view>
					  <view id="zheng">调料成分</view>
					  <view id="fu">{{ item.flavour }}</view>
					  <view id="zheng">食物成分</view>
					  <view id="fu">{{ item.comestible }}</view>
				  </view>
				</view>
				<view style="margin:20rpx auto;height: 20%;width: 96%;padding-top: 10rpx;border-radius: 15px;;">
					<view style="margin: auto;font-size: 36rpx;text-align: center;">介绍</view>
					<view style="width: 80%;margin: auto;">
						<view  id="buzhou" style="white-space: pre-wrap;"  v-html="item.introduce" ></view>
					</view>
				</view>
			</view>
			<!-- 分页 -->
			<view style="width: 50%;hieght: 50px;">
				<page-pagination v-show="show" :total="page.total"
				 :showAround="true" :btnText="true" :forceEllipses="true" @change="change">
				</page-pagination>
			</view>
		</scroll-view>
		<view style="width: 100vh;height: 60rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemone:{},
				recipeFileId:'',
				list: [],
				recipeFileId2: '',
				page: {
					total: '', //总页数
					pageSize: 10, //每页条数
					pageNum: 1 //默认当前页
				}
			}
		},
		created(){
			
		},
		change(pageNum, type) {
			this.page.pageNum = pageNum;
			console.log("点击了" + type + "，当前页：" + pageNum);
		},
		onLoad(option) {
			if(option.item == null && option.items == null){
				console.log("*****wojinlaila ***");
				this.recipeFileId = option.recipeFileId
				this.getRecipeById();
			}
			if(option.items == 0 || option.items == 1 || option.items == 2){
				this.recipeFileId2 = option.items;
				this.getRecipeById2();
			}
			//打印出上个页面传递的参数。
			this.itemone = option.item;
		},
		methods: {
			//返回上一层
			goBack(){
				uni.navigateBack();
			},
			getRecipeById() {
				console.log("***footType***2",this.footType)
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/Recipe/getRecipeById',
					method: "GET",
					data: {
						recipeFileId: this.recipeFileId
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 Coacharray 数组
							this.itemone = res.data.data;
							console.log("***+++++***",this.itemone)
							
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			getRecipeById2() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/Recipe/getRecipeById2',
					method: "GET",
					data: {
						footType: this.recipeFileId2
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 Coacharray 数组
							this.itemone = res.data.data;
							console.log("***+++++***",this.itemone)
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			}
		}
	}
</script>

<style>	
	.content {
	  flex: 1;
	  overflow: hidden;
	}
	#buzhou{
		margin-top: 15rpx;
	}
	#fu{
		margin-left: 56rpx;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	#zheng{
		margin-top: 15rpx;
	}
	.back {
		position: relative;
		width: 100%;
		height: 1073px;
		overflow: hidden;
		background-image: url("http://101.43.223.224:8765/image/getImageById?id=6755");
		/* 超出部分隐藏，可根据需求调整 */
		display: flex;
		flex-direction: column;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
</style>
